<template>
  <el-dialog :visible="visible" width="800px" :before-close="close">
    <div class="key-content">
      <div class="key-input flex items-middle">
        <div>自定义关键字：</div>
        <input type="text" v-model="key" maxlength="15" />
        <el-button size="mini" type="primary" @click="toCustom">确认</el-button>
      </div>
      <div class="select-content" v-show="selectList.length">
        <div class="select-lable">已选关键字：</div>
        <span class="select-item" v-for="(item,index) in selectList" :key="index">
          <span v-if="item.check">
            {{item.name}}
            <img src="../../static/image/region_cha.png" @click="onDelete(item,index)" />
          </span>
        </span>
      </div>
      <div class="select-content" v-show="customList.length">
        <span class="select-item" v-for="(v,j) in customList" :key="j">
          <span>
            {{v}}
            <img src="../../static/image/region_cha.png" @click="onDeleteCustom(v,j)" />
          </span>
        </span>
      </div>
      <div class="key-list" v-for="(item,index) in keyData" :key="index">
        <div class="key-lable">{{item.typeName}}：</div>
        <span
          class="key-item"
          v-for="(k,i) in item.values"
          :key="i"
          @click="selectKey(index,k,i)"
          :class="k.check === true ? 'active' : ''"
        >{{k.name}}</span>
      </div>
      <div style="margin-top: 20px" class="flex flex-end">
        <el-button class="btn-plain" @click="close">关闭</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getDepartmentKeywordsConfig } from "../api/api.js";
export default {
  name: "keyWord",
  data() {
    return {
      key: "",
      visible: false,
      departId: "",
      keyData: [],
      selectList: [],
      customList: []
    };
  },
  watch: {
    selectList: {
      deep: true,
      handler(val) {
        this.getSelect();
      }
    }
  },
  methods: {
    open(id, flag) {
      this.departId = id;
      this.visible = true;
      this.getList();
    },
    getList() {
      getDepartmentKeywordsConfig().then(res => {
        let arr = [];
        res.result.forEach((item, index) => {
          let obj = {
            typeName: item.typeName,
            values: []
          };
          arr.push(obj);
          res.result[index].values.forEach((k, i) => {
            let data = {
              name: k,
              check: false
            };
            arr[index].values.push(data);
          });
          this.keyData = arr;
        });
      });
    },
    getSelect() {
      this.selectList.forEach((item, index) => {
        if (item.check === false) {
          this.selectList.splice(index, 1);
        }
      });
    },
    // 选择关键字
    selectKey(index, item, keyIndex) {
      item.check = !item.check;
      let obj = {
        index: index,
        keyIndex: keyIndex
      };
      if (item.check) {
        this.selectList.push(Object.assign(obj, item));
      }
    },
    // 自定义关键字添加
    toCustom() {
      if (this.key.trim() !== "") {
        this.customList.push(this.key);
        this.customList = Array.from(new Set(this.customList));
        // console.log(5555555555, this.customList);
        this.key = "";
      } else {
        this.$message({ type: "warning", message: "请输入关键字!" });
      }
    },
    // 删除已选关键字
    onDelete(item, index) {
      this.keyData[item.index].values[item.keyIndex].check = false;
      this.selectList.splice(index, 1);
    },
    onDeleteCustom(item, index) {
      this.customList.splice(index, 1);
    },
    submit() {
      let arr = [];
      this.selectList.map(item => {
        arr.push(item.name);
      });
      let params = Array.from(new Set([...arr, ...this.customList]));
      // console.log(5555555555, params);
      let keywords = params.join("|");
      this.$emit("onSubmit", this.departId, keywords);
      this.close();
    },
    close() {
      this.keyData = [];
      this.selectList = [];
      this.customList = [];
      this.visible = false;
    }
  }
};
</script>
<style lang="less" scoped>
.key-content {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .key-input {
    margin-bottom: 10px;
    input {
      border: 1px solid #ddd;
      padding: 10px;
      border-radius: 5px;
      width: 250px;
      margin-right: 20px;
    }
  }
  .key-list {
    width: 100%;
    .key-lable {
      font-size: 16px;
      width: 100px;
      font-weight: 600;
    }
    .key-item {
      padding: 5px 10px;
      box-sizing: border-box;
      font-size: 14px;
      margin: 5px;
      display: inline-block;
      cursor: pointer;
      border-radius: 5px;
    }
    .active {
      background: #44a2ff;
      color: #fff;
    }
  }
  .select-content {
    .select-lable {
      font-size: 16px;
      width: 100px;
      font-weight: 600;
    }
    .select-item {
      padding: 5px 10px;
      box-sizing: border-box;
      font-size: 14px;
      margin: 5px;
      display: inline-block;
      cursor: pointer;
      background: #44a2ff;
      color: #fff;
      border-radius: 5px;
      position: relative;
      cursor: pointer;
      img {
        width: 16px;
        position: absolute;
        right: -2px;
        top: -2px;
      }
    }
  }
}
</style>